<template>
	<view>
		<view style="height: 110rpx;"></view>
		<view class="tabbar">
			<view class="action">
				<u-icon name="home-fill" size="20" label="首页" labelPos="bottom" labelSize="12"
					@click="goreto('/pages/vote/index?vote_id='+vote_id)"
					:labelColor="route=='/pages/vote/index'?color:'#767a82'" :color="route=='/pages/vote/index'?color:'#767a82'"></u-icon>
			</view>

			<view class="action">
				<u-icon name="bookmark-fill" size="20" label="排行榜" labelPos="bottom" labelSize="12"
					@click="goreto('/pages/vote/rank?vote_id='+vote_id)" :labelColor="route=='/pages/vote/rank'?color:'#767a82'"
					:color="route=='/pages/vote/rank'?color:'#767a82'"></u-icon>
			</view>
			<view class="action">
				<u-icon name="gift-fill" size="20" label="奖品" labelPos="bottom" labelSize="12"
					@click="goreto('/pages/vote/a?vote_id='+vote_id)" :labelColor="route=='/pages/vote/a'?color:'#767a82'"
					:color="route=='/pages/vote/a'?color:'#767a82'"></u-icon>
			</view>
			<view class="action">
				<u-icon name="file-text-fill" size="20" label="活动详情" labelPos="bottom" labelSize="12"
					@click="goreto('/pages/vote/rule?vote_id='+vote_id)" :labelColor="route=='/pages/vote/rule'?color:'#767a82'"
					:color="route=='/pages/vote/rule'?color:'#767a82'"></u-icon>
			</view>
			<view class="action">
				<u-icon name="chat-fill" size="20" label="主办方联系" labelPos="bottom" labelSize="12"
					@click="goreto('/pages/vote/b?vote_id='+vote_id)" :labelColor="route=='/pages/vote/b'?color:'#767a82'"
					:color="route=='/pages/vote/b'?color:'#767a82'"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'tabbar',
		props: {
			vote_id: {
				type: String,
				default: 0
			},
			temp_name: {
				type: String,
				default: '/pages/vote/index'
			},
		},
		data() {
			return {
				color: '#767a82',
				route: uni.$u.page()
			};
		},

		mounted() {
			if (this.temp_name == 'qqsh') {
				this.color = '#9c4e1d'
			} else if (this.temp_name == 'huajia') {
				this.color = '#00BFFF'
			} else if (this.temp_name == 'sheji') {
				this.color = '#fa3612'
			} else if (this.temp_name == 'fengcai') {
				this.color = '#AB1600'
			} else if (this.temp_name == 'jiewu') {
				this.color = '#F842BD'
			} else if (this.temp_name == 'shufa') {
				this.color = '#000000'
			} else if (this.temp_name == 'wang') {
				this.color = '#31CDCA'
			} else if (this.temp_name == 'sheying') {
				this.color = '#262621'
			}else if (this.temp_name == 'youxiu') {
				this.color = '#41d1fb'
			}else if (this.temp_name == 'liuyi') {
				this.color = '#7ef903'
			}
		},
		methods: {
			goreto(url) {
				this.utils.goreto(url)
			},
			clickClass(url) {
				return this.route == url ? this.color : '#767a82'
			},

		}
	};
</script>

<style lang="scss">
	.tabbar {
		width: 100%;
		position: fixed;
		left: 0px;
		right: 0px;
		bottom: 0rpx;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 110rpx;

		.action {
			flex: 1;

			.u-icon__icon {
				color: #767a82 !important;
			}

			.u-icon__label {
				color: #767a82 !important;
			}
		}
	}
</style>
